import {Component, ElementRef, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {HttpService} from "@core/services/http.service";
import {HttpClient, HttpEventType, HttpRequest, HttpResponse} from "@angular/common/http";
import {DomSanitizer} from "@angular/platform-browser";
import swal, { SweetAlertType } from 'sweetalert2';

@Component({
  selector: 'app-c-video-tool',
  templateUrl: './c-video-tool.component.html',
  styleUrls: ['./c-video-tool.component.less']
})
export class CVideoToolComponent implements OnInit {

    @Output() onChange = new EventEmitter<any>();
    @Output() onChangeTxt = new EventEmitter<any>();
    @Output() onDelete = new EventEmitter<any>();


    file;
    @Input() rightData;

    set rightSrc(value){
        this.rightData.src = value;
    }

    get rightSrc(){
        if ( !this.rightData.src) {
            return '';
        } else {
            return this.rightData.src;
        }
    }

    _rightStyleX;
    @Input()
    set rightStyleX(value){
        this._rightStyleX = value;
        this.emitXYWH();
    }

    get rightStyleX(){
        return this._rightStyleX;
    }

    _rightStyleY;
    @Input()
    set rightStyleY(value){
        this._rightStyleY = value;
        this.emitXYWH();
    }

    get rightStyleY(){
        return this._rightStyleY;
    }

    _rightStyleW;
    @Input()
    set rightStyleW(value){
        this._rightStyleW = value;
        this.emitXYWH();
    }

    get rightStyleW(){
        return this._rightStyleW;
    }

    _rightStyleH;
    @Input()
    set rightStyleH(value){
        this._rightStyleH = value;
        this.emitXYWH();
    }

    get rightStyleH(){
        return this._rightStyleH;
    }



    constructor(public http: HttpService, public httpClient: HttpClient, public sanitizer: DomSanitizer) { }

    ngOnInit() {

    }

    deleteComponent() {
        document.getElementById('file1')['value'] = '';
        this.file = '';
        this.uploading = false;
        this.onDelete.emit();
    }

    emitXYWH() {
        this.onChange.emit({
            x: this._rightStyleX,
            y: this._rightStyleY,
            width: this._rightStyleW,
            height: this._rightStyleH
        });
    }

    cfile;
    fileChange($event) {
        this.cfile = $event.target;
        this.file = this.cfile.files[0];
        this.rightData.text = this.file.name;
    }

    @Input('file1') file1: ElementRef;

    uploading = false;
    saveVideo() {
        if (!this.file) {
            swal(`请选择文件`, '', 'info');
            return false;
        }
        this.uploading = true;
        const formData: FormData = new FormData();
        formData.append('uploadFile', this.file);
        formData.append('Type', 'Video');
        // const req = new HttpRequest('POST', this.http.BASE_URL + '/fileUp/uploadFile.do', formData, {
        //     reportProgress: true,
        // });
        //
        // this.httpClient.request(req).subscribe(event => {
        //     if (event.type === HttpEventType.UploadProgress) {
        //         // This is an upload progress event. Compute and show the % done:
        //         const percentDone = Math.round(100 * event.loaded / event.total);
        //         console.log(`File is ${percentDone}% uploaded.`);
        //     } else if (event instanceof HttpResponse) {
        //         console.log('File is completely uploaded!');
        //     }
        // });


        this.httpClient.post(this.http.BASE_URL + '/fileUp/uploadFile', formData).subscribe(res => {
            if ( res['code'] === '0') {
                swal(`${res['msg']}`, '', 'info');
                this.rightSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.http.IP_PORT + res['filepath']);
                document.getElementById('file1')['value'] = '';
                this.file = '';
                this.uploading = false;
            } else {
                swal(`${res['msg']}`, '', 'info');
                this.uploading = false;
            }
        });
    }

}
